<docs>
  ##
</docs>
<template>
  <div>
    <div class="search">
      <input type="text" maxlength="64" placeholder="请输入职位、单位名称" v-model="form.qwgjz" ref="searchInput">
      <span @click="GET_search(1)">搜索</span>
    </div>
    <div class="search-item">
      <div @click="showFlag = 1">地点</div>
      <div @click="showFlag = 2">行业</div>
      <div @click="showFlag = 3">性质</div>
      <div @click="showFlag = 4">更多</div>
    </div>
    <!-- 工作地点 -->
    <div class="search-select-wrap" @click="hide" v-show="showFlag==1">
      <div class="search-select" @click.stop>
        <span :class="resetObj.gzdd == item.dmmc?'active':''"
          v-for="item in objSearchAll.cdg_regioncode" :key="item.dmmc"
          @click="searchOption(item.dmmc,'gzdd')">{{item.dmmc}}
        </span>
        <div class="search_btn_wrap">
          <div @click="reSet('gzdd')">重置</div>
          <div @click="hide()">取消</div>
        </div>
      </div>
    </div>
    <!-- 行业 -->
    <div class="search-select-wrap" @click="hide" v-show="showFlag==2">
      <div class="search-select" @click.stop>
        <span :class="resetObj.dwhy == item.dmid?'active':''"
        v-for="item in objSearchAll.cdg_industry_all" :key="item.dmid"
        @click="searchOption(item.dmid, 'dwhy')">{{item.dmmc}}</span>
        <div class="search_btn_wrap">
          <div @click="reSet('dwhy')">重置</div>
          <div @click="hide()">取消</div>
        </div>
      </div>

    </div>
    <!-- 性质 -->
    <div class="search-select-wrap" @click="hide" v-show="showFlag==3">
      <div class="search-select" @click.stop>
        <span :class="resetObj.dwxz == item.dmid?'active':''"
        v-for="item in objSearchAll.cdl_orgtype" :key="item.dmid"
        @click="searchOption(item.dmid, 'dwxz')">{{item.dmmc}}</span>
        <div class="search_btn_wrap">
          <div @click="reSet('dwxz')">重置</div>
          <div @click="hide()">取消</div>
        </div>
      </div>

    </div>
    <!-- 其他 -->
    <div class="search-select-wrap" @click="hide" v-show="showFlag==4">
      <div class="search-select" @click.stop>
        <div>
          <p>企业规模：</p>
          <span :class="resetObj.qygm == item.dmid?'active':''"
            v-for="item in objSearchAll.zyjs_d_qygm" :key="item.dmid"
            @click="searchOption(item.dmid, 'qygm')">{{item.dmmc}}</span>
        </div>
        <div>
          <p>用工形式：</p>
          <span :class="resetObj.ygxs == item.dmid?'active':''"
          v-for="item in objSearchAll.zyjs_d_dwygxs" :key="item.dmid"
          @click="searchOption(item.dmid, 'ygxs')">{{item.dmmc}}</span>
        </div>
        <div>
          <p>月薪：</p>
          <co-form :model="form" ref="form">
            <co-input prop="" label="月薪起" type="tel"
              v-model="form.zdyx" placeholder="请输入月薪起"></co-input>
            <co-input prop="" label="月薪止" type="tel"
            v-model="form.zgyx" placeholder="请输入月薪止"></co-input>
          </co-form>
        </div>
        <div class="search_btn_wrap">
          <div @click="reSet('ygxs,qygm,zdyx,zgyx')">重置</div>
          <div @click="GET_search(1)">确定</div>
        </div>
      </div>
    </div>

    <pagination-list @pullingDown="asyncFetch"
      :no-data="noData" class="search-result"
      :ajax-loading="ajaxLoading">
      <position v-for="(item,index) in zpxx" :key="index"
      :job="item.gwmc" :money="item.xc" :company="item.dwmc" :data="item.gwfbsj"
      :dwdjid="item.dwdjid" :zpgwid="item.zpgwid"></position>
    </pagination-list>
  </div>
</template>
<script>
import Position from 'base/job/job';
import $ from '@/common/js/axios';
import { validator } from 'common/js/valid';
import coForm from 'base/form/form';
import coInput from 'base/form/input';
import PaginationList from 'base/paginationList/paginationList';



export default {
  name: 'search',
  components: { Position, PaginationList, coForm, coInput },
  data() {
    return {
      zpxx: [],
      ajaxLoading: false,
      noData: false,
      resetObj: {
        gzdd: '',
        dwhy: '',
        dwxz: '',
        qygm: '',
        ygxs: ''
      },
      objSearchAll: {
        cdg_regioncode: [],
        cdg_industry_all: [],
        cdl_orgtype: [],
        zyjs_d_qygm: [],
        zyjs_d_dwygxs: []
      },
      showFlag: 0,
      form: {
        qwgjz: '',
        dwhy: '',
        gzdd: '',
        dwxz: '',
        qygm: '',
        ygxs: '',
        zgyx: '',
        zdyx: '',
        pageNum: 1,
        pageSize: '10'
      },
      // rules: {
      //   zdyx: validator('7,"number","最低月薪",true'), // 期望最低薪资
      //   zgyx: validator('7,"number","最高月薪",true'), // 期望最高薪资
      // },
    };
  },
  methods: {

    reSet(type) {
      if (type == 'dwhy') {
        this.$http.get('/dmbgl/ycjdmbCx', {params: {
          table_name: 'cdg_industry_all'
        }}).then(res => {
          this.objSearchAll.cdg_industry_all = res.returnData.dmblb;
        }).finally(() => {
          this.$loading = false;
        });
      }
      var arr = type.split(',');
      for (let i in arr) {
        this.resetObj[arr[i]] = '';
        this.form[arr[i]] = '';
      }
      this.GET_search(1);
    },
    getDmb() {
      this.$http.get('/dmbgl/ycjdmbCx', {params: {
        table_name: 'cdg_industry_all'
      }}).then(res => {
        this.objSearchAll.cdg_industry_all = res.returnData.dmblb;
      }).finally(() => {
        this.$loading = false;
      });
      this.$http.get('/dmbgl/ycjdmbCx', {params: {
        table_name: 'cdg_regioncode',
        dmid: '110000000000'
      }}).then(res => {
        this.objSearchAll.cdg_regioncode = res.returnData.dmblb;

      }).finally(() => {
        this.$loading = false;
      });
      this.$http.get('/dmbgl/dmblbCx', {params: {
        table_name: 'zyjs_d_qygm,zyjs_d_dwygxs,cdl_orgtype'
      }}).then(res => {
        this.objSearchAll.zyjs_d_qygm = res.returnData.dmblb.zyjs_d_qygm;
        this.objSearchAll.zyjs_d_dwygxs = res.returnData.dmblb.zyjs_d_dwygxs;
        this.objSearchAll.cdl_orgtype = res.returnData.dmblb.cdl_orgtype;
      }).finally(() => {
        this.$loading = false;
      });
    },
    searchOption(item, type) {
      this.resetObj[type] = item;
      if (type == 'dwhy') {
        this.$http.get('/dmbgl/ycjdmbCx', {params: {
          table_name: 'cdg_industry_all',
          dmid: item
        }}).then(res => {
          if (res.returnData.dmblb.length == 0) {
            this.form[type] = item;
            this.GET_search(1);
          } else {
            this.objSearchAll.cdg_industry_all = res.returnData.dmblb;
          }
        }).finally(() => {
          this.$loading = false;
        });
      } else{
        this.showFlag = 0;
        this.form[type] = item;
        this.GET_search(1);
      }
    },

    // 搜索职位
    GET_search(page = 1) {
      if (isNaN(this.form.zdyx)) {
        this.$alert('最低月薪请输入数字');
        return false;
      }
      if (isNaN(this.form.zgyx)) {
        this.$alert('最高月薪请输入数字');
        return false;
      }
      if (this.form.zdyx.length > 7) {
        this.$alert('最低月薪长度超过7位');
        return false;
      }
      if (this.form.zgyx.length > 7) {
        this.$alert('最高月薪长度超过7位');
        return false;
      }
      // this.$refs.form.validate(() => {

      // });
      if (parseInt(this.form.zdyx) > parseInt(this.form.zgyx)) {
        this.$alert('最低月薪不能大于最高月薪');
        return false;
      }
      if (parseInt(this.form.zdyx) > parseInt(this.form.zgyx)) {
        this.$alert('最高月薪不能小于最低月薪');
        return false;
      }
      this.$loading = true;
      this.ajaxLoading = true;
      this.form.pageNum = page;
      $.get('/grgl/zpxxSs', {
        params: this.form
      })
        .then(res => {
          sessionStorage.setItem('qwgjz', this.form.qwgjz);
          sessionStorage.setItem('page', page);
          const data = res.returnData;
          // 无查询结果
          if (+data.executeResult === 0) {
            this.noData = true;
            // this.zpxx = [];
            if (page === 1) {
              this.zpxx = []
            }
          } else {
            this.noData = false;
            // 有数据
            if (page === 1) {
              this.zpxx = data.zpxx;
            } else {
              this.zpxx = this.zpxx.concat(data.zpxx);
            }
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
          this.$loading = false;
        });
      this.showFlag = 0;
    },
    hide(){
      this.showFlag = 0;
    },
    // async fetach data
    asyncFetch(page) {
      this.GET_search(page);
    }
  },
  created() {
    this.form.qwgjz = this.$store.getters.qwgjz;
    this.GET_search();
    this.getDmb();
  },
  mounted() {
    this.$refs.searchInput.focus();
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
$height: 109px;
.search {
  height: $height;
  line-height: $height;
  background-color: #244458;
  position: fixed;
  top: 0;
  width: 100%;
  input {
    height: 60px;
    line-height: 60px;
    width: 64%;
    padding-left: 20px;
    border-radius: 30px;
    background-color: #fff;
    margin: 3% 10% 3% 12%;
    float: left;
  }
  span {
    font-size: 30px;
    color: #fff;
  }
}
.search-item {
  display: flex;
  margin-top: $height;
  background-color:#149dee;
  div {
    flex: 100%;
    text-align: center;
    color: #fff;
    padding: 15px 0;
  }
}
.search-select-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.5)
}
.search-select {
  width: 100%;
  background-color: #fff;
  padding: 15px;
  color: #149dee;
  span {
    display: inline-block;
    padding: 15px;
  }
  div {
    margin: 20px;
    p {
      color: darkgray;
    }
  }
  .active {
    color: #fc5656;
  }
}
.search_btn_wrap {
  display: flex;
  // width: 100%;
  // margin-left: -60px;
  div {
    flex: 1;
    // width: 100%;
    text-align: center;
    padding: 15px 0;
    border: 1px solid #eeeeee;
    background-color: #149dee;
    color: #fff;
  }
}
</style>
